<template>
  <view class="tabs">
    <view
      v-for="(tab, index) in list"
      :key="index"
      class="tab-item"
      @click="selectTab(index)"
      :style="{ textAlign: list.length == 3 ? 'center' : 'left' }"
    >
      <view class="tab-item-text" :class="{ active: index === currentIndex }">
        {{ tab.name }}
      </view>
    </view>
  </view>
</template>

<script setup>
import { nextTick, ref, onMounted, computed } from 'vue'
import { onReady, onShow } from '@dcloudio/uni-app'
const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
})
const currentIndex = ref(0)
const selectTab = (index) => {
  currentIndex.value = index
  emit('selectTab', index)
}
const emit = defineEmits(['selectTab'])
</script>

<style lang="scss" scoped>
.tabs {
  display: flex;
  justify-content: space-around; /* 均分空间 */

  padding: 10px 0;
}

.tab-item {
  padding: 0 20px;
  // line-height: 40px;
  // text-align: center;
  border-radius: 5px;
  font-size: 28rpx;
  flex: 1; /* 允许宽度根据内容变化 */
  white-space: nowrap;
  color: #666666;
  font-weight: 400;
}
.tab-item-text.active {
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 28rpx;
  color: #333333;
  position: relative;
  display: inline;
  &::after {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    bottom: -15rpx;
    content: '';
    width: 40rpx;
    height: 6rpx;
    background: #00c1b9;
    border-radius: 4rpx 4rpx 4rpx 4rpx;
  }
}
</style>
